<template>
  <div class="buyer-payment-notice">
    <el-form ref="form" :model="data" :rules="rules" label-width="auto">
      <h3>买方交款通知单</h3>
      <div style="text-align: left">交款人买方：{{ data.buyerName }}</div>
      <div style="text-align: left; margin-bottom: 8px">
        房屋坐落：{{ data.propertyLocation }}
      </div>
      <table
        border="1"
        cellspacing="0"
        cellpadding="5"
        style="border-collapse: collapse"
      >
        <thead>
          <tr>
            <th></th>
            <th>应交(元)</th>
            <th>小计(元)</th>
            <th>实交(元)</th>
            <th>小计(元)</th>
            <th>欠款(元)</th>
            <th>小计(元)</th>
            <th>应交时间</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>服务费</td>
            <td>
              <el-form-item prop="serviceFeeDue">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  v-model.number="data.serviceFeeDue"
                  :disabled="data.serviceFeePaid > 0"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <td rowspan="2">
              {{ data.serviceFeeDue + data.transactionFeeDue }}
            </td>
            <td>
              <el-form-item prop="serviceFeePaid">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  v-model.number="data.serviceFeePaid"
                  readonly
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <td rowspan="2">
              {{ data.serviceFeePaid + data.transactionFeePaid }}
            </td>
            <td>{{ serviceFeeBalance }}</td>
            <td rowspan="2">{{ serviceFeeBalance + transactionFeeBalance }}</td>
            <td>
              <el-form-item prop="serviceFeeDueTime">
                <el-date-picker
                  v-model="data.serviceFeeDueTime"
                  type="date"
                  placeholder="请选择"
                  value-format="YYYY-MM-DD"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>交易费</td>
            <td>
              <el-form-item prop="transactionFeeDue">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  v-model.number="data.transactionFeeDue"
                  :disabled="data.transactionFeePaid > 0"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <!-- <td>{{ data.transactionFeeDue }}</td> -->
            <td>
              <el-form-item prop="transactionFeePaid">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  readonly
                  v-model.number="data.transactionFeePaid"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <!-- <td>{{ data.transactionFeePaid }}</td> -->
            <td>{{ transactionFeeBalance }}</td>
            <!-- <td>{{ data.transactionFeeDue - data.transactionFeePaid }}</td> -->
            <td>
              <el-form-item prop="transactionFeeDueTime">
                <el-date-picker
                  v-model="data.transactionFeeDueTime"
                  type="date"
                  placeholder="请选择"
                  value-format="YYYY-MM-DD"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>服务费代收</td>
            <td>
              <el-form-item prop="serviceFeeProxyDue">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  v-model.number="data.serviceFeeProxyDue"
                  :disabled="data.serviceFeeProxyPaid > 0"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <td rowspan="2">
              {{ data.serviceFeeProxyDue + data.transactionFeeProxyDue }}
            </td>
            <td>
              <el-form-item prop="serviceFeeProxyPaid">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  readonly
                  v-model.number="data.serviceFeeProxyPaid"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <td rowspan="2">
              {{ data.serviceFeeProxyPaid + data.transactionFeeProxyPaid }}
            </td>
            <td>{{ serviceFeeProxyBalance }}</td>
            <td rowspan="2">
              {{ serviceFeeProxyBalance + transactionFeeProxyBalance }}
            </td>
            <td>
              <el-form-item prop="serviceFeeProxyDueTime">
                <el-date-picker
                  v-model="data.serviceFeeProxyDueTime"
                  type="date"
                  placeholder="请选择"
                  value-format="YYYY-MM-DD"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
          </tr>

          <tr>
            <td>交易费代收</td>
            <td>
              <el-form-item prop="transactionFeeProxyDue">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  :precision="2"
                  v-model.number="data.transactionFeeProxyDue"
                  :disabled="data.transactionFeeProxyPaid > 0"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <!-- <td>{{ data.transactionFeeDue }}</td> -->
            <td>
              <el-form-item prop="transactionFeeProxyPaid">
                <el-input-number
                  min="0"
                  max="99999999.99"
                  readonly
                  :precision="2"
                  v-model.number="data.transactionFeeProxyPaid"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
            <!-- <td>{{ data.transactionFeePaid }}</td> -->
            <td>{{ transactionFeeProxyBalance }}</td>
            <!-- <td>{{ data.transactionFeeDue - data.transactionFeePaid }}</td> -->
            <td>
              <el-form-item prop="transactionFeeProxyDueTime">
                <el-date-picker
                  v-model="data.transactionFeeProxyDueTime"
                  type="date"
                  placeholder="请选择"
                  value-format="YYYY-MM-DD"
                  style="width: 150px"
                />
              </el-form-item>
            </td>
          </tr>
          <!-- 其他行类似 -->
          <tr>
            <td>合计</td>
            <td>{{ totalDue }}</td>
            <td>{{ totalDue }}</td>
            <td>{{ totalPaid }}</td>
            <td>{{ totalPaid }}</td>
            <td>{{ totalOwed }}</td>
            <td>{{ totalBalance }}</td>
            <td></td>
          </tr>
          <tr>
            <td>定金</td>
            <td colspan="3">
              {{ data.depositAmount }}
            </td>
            <td>大写金额</td>
            <td colspan="3">{{ data.depositAmountInWords }}</td>
          </tr>
          <tr>
            <td>房款</td>
            <td colspan="3">
              {{ data.housePriceAmount }}
            </td>
            <td>大写金额</td>
            <td colspan="3">{{ data.housePriceAmountInWords }}</td>
          </tr>
          <tr>
            <td>签约店面</td>
            <td colspan="3">{{ data.regionName + "" + data.storeName }}</td>
            <td>申请人</td>
            <td colspan="3">{{ data.applicantName }}</td>
          </tr>
        </tbody>
      </table>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, computed, watch, defineProps } from "vue";

const props = defineProps({
  fData: {
    type: Object,
    required: true,
  },
});

const rules = reactive({
  serviceFeeDueTime: [{ required: true, message: "请选择应交时间" }],
  transactionFeeDueTime: [{ required: true, message: "请选择应交时间" }],
  serviceFeeProxyDueTime: [{ required: true, message: "请选择应交时间" }],
  transactionFeeProxyDueTime: [{ required: true, message: "请选择应交时间" }],
});

// const emit = defineEmits(["update:fData"]);
const data = reactive({ ...props.fData });
// watch(data, () => emit("update:fData", data), { deep: true });
const calculateOwed = (type) => {
  return data[type + "Due"] - data[type + "Paid"];
};
//服务费欠款
const serviceFeeBalance = computed(() => {
  data.serviceFeeBalance = data.serviceFeeDue - data.serviceFeePaid;
  return data.serviceFeeBalance;
});

//交易费欠款
const transactionFeeBalance = computed(() => {
  data.transactionFeeBalance = data.transactionFeeDue - data.transactionFeePaid;
  return data.transactionFeeBalance;
});

//服务费代收欠款
const serviceFeeProxyBalance = computed(() => {
  data.serviceFeeProxyBalance =
    data.serviceFeeProxyDue - data.serviceFeeProxyPaid;
  return data.serviceFeeProxyBalance;
});

//交易费代收欠款
const transactionFeeProxyBalance = computed(() => {
  data.transactionFeeProxyBalance =
    data.transactionFeeProxyDue - data.transactionFeeProxyPaid;
  return data.transactionFeeProxyBalance;
});

const totalDue = computed(() => {
  return Object.keys(data)
    .filter((key) => key.endsWith("Due"))
    .reduce((sum, key) => sum + Number(data[key]), 0);
});

const totalPaid = computed(() => {
  return Object.keys(data)
    .filter((key) => key.endsWith("Paid"))
    .reduce((sum, key) => sum + Number(data[key]), 0);
});

const totalOwed = computed(() => {
  return totalDue.value - totalPaid.value;
});

const totalBalance = computed(() => {
  return (
    serviceFeeBalance.value +
    transactionFeeBalance.value +
    serviceFeeProxyBalance.value +
    transactionFeeProxyBalance.value
  );
});
const form = ref();
function validateForm() {
  return form.value.validate();
}
//暴露data和validate方法
defineExpose({
  data,
  validateForm,
});
</script>

<style scoped>
.buyer-payment-notice {
  text-align: center;
}

table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}
</style>
